<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="list">
          <h3>云音乐特色榜</h3>
          <table cellpadding="0" cellspacing="0" class="rankList">
            <tr v-for="(item,i) in FeatureList" :key="i" @click="getSongListDetails(item.id)">
              <td class="rankListImg"><img :src="item.coverImgUrl" :alt="item.name"></td>
              <td>
                <ul class="songListTitles">
                  <li>{{item.name}}</li>
                  <li class="updateTime">{{item.updateFrequency}}</li>
                </ul>
              </td>
            </tr>
          </table>

          <h3>全球媒体榜</h3>
          <table cellpadding="0" cellspacing="0" class="rankList">
            <tr v-for="(item,i) in MediaList" :key="i" @click="getSongListDetails(item.id)">
              <td class="rankListImg"><img :src="item.coverImgUrl" :alt="item.name"></td>
              <td>
                <ul class="songListTitles">
                  <li>{{item.name}}</li>
                  <li class="updateTime">{{item.updateFrequency}}</li>
                </ul>
              </td>
            </tr>
          </table>
        </div>
      </el-col>

      <el-col :span="18">
        <div class="details">
          <table cellpadding="0" cellspacing="0" class="songListDetails">
            <tr>
              <td class="songListImg"><img :src="TheSongListDetails.coverImgUrl" :alt="TheSongListDetails.name"></td>
              <td>
                <ul class="songListInfo">
                  <li>
                    <h2>{{TheSongListDetails.name}}</h2>
                  </li>
                  <li>最近更新：{{formatDate(TheSongListDetails.updateTime)}}</li>
                </ul>
                <ul class="operation">
                  <li>
                    <el-button type="primary" plain><i class="el-icon-folder-add"></i>（{{TheSongListDetails.subscribedCount}}）</el-button>
                  </li>
                  <li>
                    <el-button type="primary" plain><i class="el-icon-chat-dot-square"></i>（{{TheSongListDetails.commentCount}}）</el-button>
                  </li>
                </ul>
              </td>
            </tr>
          </table>

          <table cellpadding="0" cellspacing="0" class="songListDetails">
            <tr>
              <td class="songTableTitle">歌曲列表</td>
              <td class="songCount">{{TheSongListDetails.trackCount}}首歌</td>
              <td colspan="3" class="songPlayCount">播放：{{TheSongListDetails.playCount}}次</td>
            </tr>
          </table>

          <table cellpadding="0" cellspacing="0" class="songListDetails3">
            <tr class="songListTh">
              <td colspan="2"></td>
              <td class="name">标题</td>
              <td class="songTime">时长</td>
              <td class="songer">歌手</td>
            <tr>
            <tr v-for="(item,i) in AllSongsDetails" :key="i" :class="(i+1)%2==0?bgcolor.color2:bgcolor.color1">
              <td class="songImg" v-if="item[0]"><img :src="item[0].al.picUrl" :alt="item[0].al.name"></td>
              <td class="ranking">{{i+1}}</td>
              <td class="name" v-if="item[0]">
                <i @click="toSongDetails(item[0].id)">{{item[0].name}}</i>&nbsp;
                <i v-if="item[0].mv != 0" id="mvicon" class="el-icon-video-camera" @click="toMVDetails(item[0].mv)"></i>
              </td>
              <td class="songTime" v-if="item[0]">{{formatDateTime(item[0].dt)}}</td>
              <td class="songer" v-if="item[0]" @click="toSongerDetails(item[0].ar[0].id)">{{item[0].ar[0].name}}</td>
            </tr>
          </table>
        </div>

        <div>
          <h2>评论（共{{TheSongListDetails.commentCount}}条评论）</h2>
          <el-input type="textarea" :rows="4" placeholder="说说你的看法吧" v-model="textarea" resize="none"></el-input>
          <div class="postComments">
            <el-button type="primary" size="mini">发表评论</el-button>
          </div>

          <h3 v-if="hotComments.length != 0">精彩评论</h3>
          <ul class="comments" v-if="hotComments.length != 0">
            <li v-for="(item,i) in hotComments" :key="i">
              <table cellpadding="0" cellspacing="0">
                <tr>
                  <td rowspan="2" class="userImg" @click="toUserDetails(item.user.userId)"><img :src="item.user.avatarUrl" :alt="item.user.nickname"></td>
                  <td class="userName" @click="toUserDetails(item.user.userId)">{{item.user.nickname}}</td>
                </tr>
                <tr>
                  <td class="commentTime">{{formatDate(item.time)}}</td>
                </tr>
                <tr>
                  <td></td>
                  <td class="commentInfo">{{item.content}}</td>
                </tr>
                <tr v-if="item.beReplied != undefined && item.beReplied == null || item.beReplied.length > 0">
                  <td></td>
                  <td class="commentInfo">
                    <div class="replyComment">
                      <table>
                        <tr>
                          <td class="userName">{{item.beReplied[0].user.nickname}}</td>
                        </tr>
                        <tr>
                          <td class="commentInfo">{{item.beReplied[0].content}}</td>
                        </tr>
                      </table>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td></td>
                  <td class="commentLiked">
                    <a href="#"><i class="el-icon-thumb"></i>（{{item.likedCount}}）</a>
                    <a href="#">回复</a>
                  </td>
                </tr>
              </table>
            </li>
          </ul>

          <h3 v-if="comments.length != 0">最新评论</h3>
          <ul class="comments" v-if="comments.length != 0">
            <li v-for="(item,i) in comments" :key="i">
              <table cellpadding="0" cellspacing="0">
                <tr>
                  <td rowspan="2" class="userImg" @click="toUserDetails(item.user.userId)"><img :src="item.user.avatarUrl" :alt="item.user.nickname"></td>
                  <td class="userName" @click="toUserDetails(item.user.userId)">{{item.user.nickname}}</td>
                </tr>
                <tr>
                  <td class="commentTime">{{formatDate(item.time)}}</td>
                </tr>
                <tr>
                  <td></td>
                  <td class="commentInfo">{{item.content}}</td>
                </tr>
                <tr v-if="item.beReplied != undefined && item.beReplied == null || item.beReplied.length > 0">
                  <td></td>
                  <td class="commentInfo">
                    <div class="replyComment">
                      <table>
                        <tr>
                          <td class="userName">{{item.beReplied[0].user.nickname}}</td>
                        </tr>
                        <tr>
                          <td class="commentInfo">{{item.beReplied[0].content}}</td>
                        </tr>
                      </table>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td></td>
                  <td class="commentLiked">
                    <a href="#"><i class="el-icon-thumb"></i>（{{item.likedCount}}）</a>
                    <a href="#">回复</a>
                  </td>
                </tr>
              </table>
            </li>
          </ul>
          <el-pagination v-if="comments.length != 0" :page-size="20" :pager-count="7" layout="prev, pager, next" :total="TheSongListDetails.commentCount" :current-page="commentPage" @current-change="handleCommentChange">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAllRankingListId, getSongListDetails, getSongDetails, getSongListComments } from "../../../network/home"
import { getSongUrl } from "../../../network/search"

export default {
  name: "RankingList",
  data() {
    return {
      artistTopList: [],
      //所有榜单
      SongListAll: [],
      //云音乐特色榜
      FeatureList: [],
      //全球媒体榜
      MediaList: [],
      //存放歌单的详情，例如歌单中歌曲的id等
      TheSongListDetails: [],
      //存放歌单中所有歌曲的详情
      AllSongsDetails: [],
      //添加背景样式
      bgcolor: { color1: "white", color2: "grey" },
      //存放当前显示歌单的id 用来判断是否多次点击
      SongListIds: 19723756,
      //是否为第一次进入
      isFirst: true,
      loginCookie: "",
      textarea: "",
      hotComments: "",
      comments: "",
      commentPage: 1,
    }
  },
  created() {
    this.getLoginCookie();
  },
  mounted() {
    this.getAllRankingListId();
    this.getSongListDetails(this.SongListIds);
    this.getSongDetails(1895330088);
    this.getHotSongListComments(this.SongListIds, 0, this.loginCookie);
    this.getSongListComments(this.SongListIds, 0, this.loginCookie);
  },
  methods: {
    getLoginCookie() {
      this.loginCookie = sessionStorage.getItem("cookie");
    },
    //所有榜单id信息
    getAllRankingListId() {
      getAllRankingListId().then(res => {
        //console.log(res.data);
        this.artistTopList = res.data.artistToplist;
        this.SongListAll = res.data.list;
        this.FeatureList = res.data.list.slice(0, 4);
        this.MediaList = res.data.list.slice(4);
      })
    },
    //根据歌单id 获取歌单详情
    getSongListDetails(songListId) {
      if (this.SongListIds != songListId || this.isFirst) {
        this.isFirst = false;
        this.SongListIds = songListId;
        this.AllSongsDetails = [];
        getSongListDetails(songListId).then(res => {
          //console.log(res.data);
          this.TheSongListDetails = res.data.playlist;
          for (let i of this.TheSongListDetails.trackIds) {
            this.AllSongsDetails.push(this.getSongDetails(i.id));
          }
        })
      }
    },
    //获取歌单热门评论
    getHotSongListComments(id, offset, cookie) {
      getSongListComments(id, offset, cookie).then(res => {
        //console.log(res.data);
        this.hotComments = res.data.hotComments;
      })
    },
    //获取歌单评论
    getSongListComments(id, offset, cookie) {
      getSongListComments(id, offset, cookie).then(res => {
        this.comments = res.data.comments;
      })
    },
    //根据歌曲id 获取歌曲详情
    getSongDetails(songId) {
      const result = [];
      getSongDetails(songId).then(res => {
        //console.log(res.data.songs[0]);
        result.push(res.data.songs[0]);
      })
      //console.log(result);
      return result;
    },
    getSongUrl(id) {
      getSongUrl(id).then(res => {
        localStorage.setItem("songUrl", res.data.data[0].url);
        //刷新页面 input传入过去 其中内容改了 但是页面还是原来的 需要刷新显示
        location.reload();
      })
    },
    handleCommentChange(val) {
      this.commentPage = val;
      this.getSongListComments(this.SongListIds, (val - 1) * 20, this.loginCookie);
    },
    //跳转到播放mv界面
    toMVDetails(id) {
      this.$router.push({ name: "MVDetail", params: { id: id } });
    },
    toSongDetails(id) {
      this.$router.push({ name: "SongDetails", params: { id: id } });
    },
    toSongerDetails(id) {
      this.$router.push({ name: "SongerDetails", params: { id: id } });
      location.reload();
    },
    toUserDetails(id) {
      this.$router.push({ name: "UserDetails", params: { id: id } });
    },
    formatDateTime(mss) {
      let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = Math.round((mss % (1000 * 60)) / 1000);

      if (minutes < 10) {
        if (seconds < 10) {
          return "0" + minutes + ":0" + seconds;
        } else {
          return "0" + minutes + ":" + seconds;
        }
      } else {
        if (seconds < 10) {
          return minutes + ":0" + seconds;
        } else {
          return minutes + ":" + seconds;
        }
      }
    },
    formatDate(time) {
      let date = new Date(time);
      let y = date.getFullYear();// 年
      let MM = date.getMonth() + 1;// 月
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();// 日
      d = d < 10 ? ('0' + d) : d;
      return y + '-' + MM + '-' + d;
    },
    formatNumber(num) {
      num = Number(num);
      if (num == 0) {
        return num + '';
      } else
        if (num > 1 && num < 10000) {
          return num + '';
        } else {
          return (num / 10000).toFixed(1) + '万';
        }
    },
  }
}
</script>

<style scoped>
.list {
  width: 100%;
  height: 100%;
  background-color: RGB(249, 249, 249);
  padding: 10px 0 0 0;
}
.list h3 {
  margin-left: 20px;
}
.list table {
  padding-left: 25px;
}
.details {
  width: 100%;
  height: 100%;
  background-color: RGB(255, 255, 255);
  padding: 30px 10px 0 10px;
}
.details table {
  margin-bottom: 10px;
}
.rankList {
  width: 100%;
  height: 100%;
}
.rankList tr:hover {
  background-color: RGB(244, 242, 242);
}
.rankList tr td {
  font-size: 0.8rem;
}
.rankListImg {
  width: 50px;
  height: 50px;
}
.rankListImg img {
  width: 100%;
  height: 100%;
}
.songListTitles {
  list-style-type: none;
  margin-left: -30px;
}
.songListTitles li {
  margin-top: 10px;
}
.updateTime {
  color: RGB(153, 153, 153);
}
.songListDetails {
  width: 100%;
  height: 100%;
}
.songListDetails3 {
  width: 100%;
  height: 100%;
}
.songListDetails3 tr:hover {
  background: RGB(245, 247, 250);
}
.songListImg {
  width: 150px;
  height: 150px;
  border: 1px solid RGB(204, 204, 204);
  padding: 5px;
}
.songListImg img {
  width: 100%;
  height: 100%;
}
.songListInfo {
  list-style-type: none;
}
.operation {
  list-style-type: none;
}
.operation li {
  float: left;
  margin-right: 5px;
}
.songTableTitle {
  font-size: 1.75rem;
  width: 13%;
}
.songCount {
  color: RGB(102, 102, 102);
}
.songPlayCount {
  text-align: right;
}
.songListTh td {
  padding: 5px;
}
.songImg {
  widows: 80px;
  height: 80px;
}
.songImg img {
  width: 89%;
  height: 89%;
  padding: 5px;
}
.ranking {
  text-align: center;
  line-height: 60px;
  width: 8%;
}
.name {
  padding: 10px;
  width: 40%;
}
.songTime {
  width: 12%;
  padding: 10px;
}
.songer {
  padding: 10px;
  width: 30%;
}
#mvicon:hover {
  background: RGB(64, 158, 255);
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.whtie {
  background: RGB(255, 255, 255);
}
.grey {
  background: RGB(250, 250, 250);
}
.el-pagination {
  margin: 0 0 2% 25%;
}
.postComments {
  text-align: right;
  margin-top: 5px;
}
.comments {
  list-style-type: none;
}
.comments li {
  margin-left: -3.2%;
  border-top: RGB(204, 204, 204) 1px solid;
  padding: 20px;
}
.userImg {
  width: 6%;
}
.userImg img {
  width: 100%;
  height: 100%;
}
.userName {
  padding-left: 20px;
  color: RGB(64, 158, 255);
}
.userName:hover {
  text-decoration: underline solid RGB(64, 158, 255);
}
.commentTime {
  padding-left: 20px;
  color: RGB(153, 153, 153);
}
.commentInfo {
  padding-left: 20px;
}
.replyComment {
  border: solid 1px RGB(222, 222, 222);
  background: RGB(242, 242, 242);
}
.commentLiked {
  text-align: right;
}
.commentLiked a {
  text-decoration: none;
  color: black;
}
.commentLiked a:hover {
  color: RGB(64, 158, 255);
}
</style>